<template>
    <div class="container">

        <!-- 标题 -->
        <div class="header">
            <div class="left">
                <div class="item">
                    <span :class="nav_select === 'home' ? 'active' : ''" @click="changeNav('home')">首页</span>
                </div>
                <div class="item">
                    <span :class="nav_select === 'monitor' ? 'active' : ''" @click="changeNav('monitor')">实况监测</span>
                </div>
            </div>
            <div class="title">
                <!-- <dv-decoration-8 style="width:400px;height:50px;" />
                <span>雅安市文旅智慧气象服务平台</span>
                <dv-decoration-8 :reverse="true" style="width:400px;height:50px;" /> -->
                <img src="@/assets/travel/logo.png" alt="" style="width:500px;height:40px;">
            </div>
            <div class="right">
                <div class="item">
                    <span :class="nav_select === 'forecast' ? 'active' : ''" @click="changeNav('forecast')">天气预报</span>
                </div>
                <div class="item">
                    <span :class="nav_select === 'warning' ? 'active' : ''" @click="changeNav('warning')">预警信息</span>
                </div>
                <div class="infoManage" @click="changeNav('baseuser')"><svg t="1723530980671" class="icon"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7066" width="32"
                        height="32">
                        <path
                            d="M572.1 157h232.6v46.5H572.1V157zM572.1 254.9h232.6v46.5H572.1v-46.5zM572.1 352.7h232.6v46.5H572.1v-46.5zM227.2 512.9H800v46.5H227.2v-46.5zM227.2 656H800v46.5H227.2V656zM227.2 799.1H800v46.5H227.2v-46.5z"
                            p-id="7067" fill="#ffffff"></path>
                        <path
                            d="M826.4 0.5H298.8L285.2 0l-0.3 0.5h-0.1v0.2L106.5 326.4h-1.1l-0.5 608.5c0 49.2 41.6 89.1 92.7 89.1H826.4c51.1 0 92.7-40 92.7-89.1V89.6c0-49.1-41.6-89.1-92.7-89.1zM301.6 48.4l71.1 72.5c17.1 17.4 14 46-6.3 59.5L147.6 324.9l154-276.5z m570.9 775.3V934.8c0 23.5-20.7 42.6-46.2 42.6H197.6c-25.5 0-46.2-19.1-46.2-42.6l0.4-559.6 242.9-160.7c43.3-28.7 50.1-89.6 14-127.1l-39-40.5h456.6c25.4 0 46.2 19.1 46.2 42.6v734.2z"
                            p-id="7068" fill="#ffffff"></path>
                    </svg><span :class="nav_select === 'baseuser' ? 'active' : ''" @click="changeNav('baseuser')">基础信息管理</span></div>
            </div>

        </div>
        <!-- 导航 -->
        <!-- <div class="nav">

            <div class="item">
                <dv-border-box-13 :color="['#a5ffde']"><span :class="nav_select === 'home' ? 'active' : ''"
                        @click="changeNav('home')">首页</span></dv-border-box-13>
            </div>
            <div class="item">
                <dv-border-box-13 :color="['#a5ffde']"><span :class="nav_select === 'monitor' ? 'active' : ''"
                        @click="changeNav('monitor')">实况监测</span></dv-border-box-13>
            </div>
            <div class="item">
                <dv-border-box-13 :color="['#a5ffde']"><span :class="nav_select === 'forecast' ? 'active' : ''"
                        @click="changeNav('forecast')">天气预报</span></dv-border-box-13>
            </div>
            <div class="item">
                <dv-border-box-13 :color="['#a5ffde']"><span :class="nav_select === 'warning' ? 'active' : ''"
                        @click="changeNav('warning')">预警信息</span></dv-border-box-13>
            </div>

        </div> -->

        <div class="content">
            <router-view></router-view>
        </div>


    </div>
</template>

<script>

export default {
    name: 'travel',
    data() {
        return {
            // 导航
            nav_select: this.$route.path.split('/')[2],
        }
    },
    methods: {
        changeNav(nav) {

            this.nav_select = nav
            if (this.$route.path !== `/travel/${nav}`) {
                this.$router.push({
                    path: `/travel/${nav}`
                })
            }
        },
    }

}
</script>

<style lang="scss" scoped>
:deep(.border-box-content) {
    display: flex;
    justify-content: center;
    align-items: center;
}

:deep(.el-input__inner) {
    background-color: transparent !important;
    border-color: #032520;
    color: #d9d9d9;

}



.container {
    width: 100%;
    height: 100%;
    // background-image: url('@/assets/travel/travel_bg.png');
    background-color: #000000;
    background-size: cover;
    background-repeat: no-repeat;



    .header {
        width: 100%;
        height: 10%;
        background-image: url('@/assets/travel/title_back1.png'), url('@/assets/travel/title_back2.png');
        background-size: contain;
        background-repeat: no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;

        .left {

            width: 30%;
            height: 100%;
            display: flex;
            justify-content: flex-end;
            align-items: flex-start;
            padding-top: 10px;
            box-sizing: border-box;

            .item {
                width: 30%;
                height: 45%;
                background: url('@/assets/travel/nav.png');
                background-size: contain;
                background-repeat: no-repeat;
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                    color: white;
                    font-size: 17px;
                    letter-spacing: 3px;
                    cursor: pointer;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    &.active {
                        background: url('@/assets/travel/nav_select.png');
                        background-size: contain;
                        background-repeat: no-repeat;
                    }
                }


            }
        }

        .title {
            width: 40%;
            height: 80%;
            display: flex;
            justify-content: center;
            align-items: flex-start;


            span {
                font-size: 30px;
                font-weight: bold;
                color: white;
                // background: linear-gradient(to bottom, rgb(255, 255, 255), rgb(157, 230, 208), rgb(4, 114, 81));
                // background-clip: text;
                // color: transparent;
                margin: 0 50px;
            }
        }

        .right {
            width: 30%;
            height: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: flex-start;
            padding-top: 10px;
            box-sizing: border-box;

            .item {
                width: 30%;
                height: 45%;
                background: url('@/assets/travel/nav.png');
                background-size: contain;
                background-repeat: no-repeat;
                display: flex;
                justify-content: center;
                align-items: center;

                span {
                    color: white;
                    font-size: 17px;
                    letter-spacing: 3px;
                    cursor: pointer;
                    width: 100%;
                    height: 100%;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    &.active {
                        background: url('@/assets/travel/nav_select.png');
                        background-size: contain;
                        background-repeat: no-repeat;
                    }
                }


            }

            .infoManage {
                width: 40%;

                height: 45%;
                display: flex;
                justify-content: center;
                align-items: center;


                span {
                    margin-left: 5px;
                    color: white;
                    font-size: 18px;
                }
            }
        }

        .infoManage {
            width: 15%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;

            span {
                margin-left: 5px;
                color: white;
                font-size: 18px;
            }
        }
    }



    .content {
        margin-top: -20px;
        width: 100%;
        height: 88%;
    }



}
</style>